<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
    <button @click="insertDBData()">数据库增</button>
    <button @click="deleteDBData()">数据库删</button>
    <button @click="updateDBData()">数据库改</button>
    <button @click="selectDBData()">数据库查</button>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
import { remote } from 'electron'
import { SaveData } from '@/class/index'

@Options({
  components: {
    HelloWorld
  }
})
export default class Home extends Vue {
  private dbClass = remote.getGlobal('DataDBClass')
  private saveData = new SaveData()

  created (): void {
    console.log(this)
    this.selectDBData()
  }

  insertDBData (filename?: string): void {
    const fileNew = [{ title: '无标题笔记', content: '' }]
    this.dbClass.setFileName(filename || 'save0.db')
    this.dbClass._db.insert(fileNew)
      .then((res: any) => {
        console.log(res)
      }).catch((err: any) => {
        console.log(err)
      })
  }

  deleteDBData (): void {
    const fileNew = [{ title: '无标题笔记', content: '' }]
    this.dbClass._db.remove(fileNew)
      .then((res: any) => {
        this.saveData = res[0]
      }).catch((err: any) => {
        console.log(err)
      })
  }

  selectDBData (): void {
    debugger
    this.dbClass._db.find()
      .then((res: any) => {
        console.log(res)
      }).catch((err: any) => {
        console.log(err)
      })
  }
}
</script>
